<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/videoDetail.css">
  <script src="../bootstrap/js/jquery.min.js"></script>
  <script src="../bootstrap/js/bootstrap.min.js"></script>
  <script src="../js/vue.js"></script>
  <script src="../js/axios.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="../js/element-ui.js"></script>
</head>
<title>视频详情</title>
<body>
<!-- 导航 -->
<nav class="navbar navbar-expand-md bg-white navbar-light fixed-top" style="font-size: 16px;">
  <h1 class="title">
    <a class="navbar-brand" href="#">
      <img src="../img/studyLogo.png" alt="logo" width="40" height="40">
    </a>
  </h1>
  <!-- 折叠按钮 -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar">
    <ul class="navbar-nav mr-auto" id="ulInfo">
      <li class="nav-item"><a class="nav-link" href="../main.html">首页</a></li>
      <!--<li class="nav-item"><a class="nav-link" href="collect.html">收藏</a></li>-->
      <li v-if="(currentUser.roleId == 2 || currentUser.roleId == 0)" class="nav-item"><a class="nav-link"
                                                                                          href="videoUpload.html">上传视频</a>
      </li>
      <li v-if="(currentUser.roleId == 2 || currentUser.roleId == 0)" class="nav-item"><a class="nav-link"
                                                                                          href="videoManager.html">视频管理</a>
      </li>
      <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link" href="userManager.html">用户管理</a>
      </li>
      <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link" href="functionManager.html">权限管理</a></li>
      <!--下拉-->
      <li class="dropdown" style="margin-right: 450px">
        <a class="dropdown-toggle nav-link" data-toggle="dropdown" role="button" aria-haspopup="true"
           aria-expanded="false" style="cursor:pointer;">我的 <span class="caret"></span></a>
        <ul class="dropdown-menu" style="text-align: center;">
          <li><a style="color: #6c757d;" href="userInfo.html">个人中心</a></li>
          <li><a style="color: #6c757d;" href="collect.html">我的收藏</a></li>
          <li><a style="color: #6c757d;" href="browse.html">浏览记录</a></li>
          <li><a style="color: #6c757d;" href="../userExit">退出登录</a></li>
        </ul>
      </li>

      <template v-if="currentUser.account == null">
        <li class="nav-item"><a class="nav-link" href="../login.html">你好,请登录</a></li>
        <li class="nav-item"><a class="nav-link" href="#">|</a></li>
        <li class="nav-item"><a class="nav-link" href="../register.html">免费注册</a></li>
      </template>
      <template v-if="currentUser.account != null">
        <li class="nav-item"><a class="nav-link" href="userInfo.html">欢迎你：{{currentUser.account}}</a></li>
        <li class="nav-item"><a class="nav-link" href="#">|</a></li>
        <li class="nav-item"><a class="nav-link" href="../userExit">退出</a></li>
      </template>
    </ul>
    <form id="formSearch" action="" class="form-inline ml-auto">
      <input id="searchInput" type="text" v-model="keyword" class="form-control mr-sm-2" placeholder="Search"
             @change="searchVideo">
      <input @click="searchVideo" type="button" class="btn btn-outline-secondary  my-2 my-sm-0" value="搜索">
    </form>
  </div>
</nav>

<!-- 风格展示区 -->
<div class="trend-style bg-light">
  <!--主体开始-->
  <div class="box" id="videoInfo">
    <div class="box_con">
      <div class="main conten clearfix">
        <!-- 展示区 -->
        <div class="showBar fl clearfix">
          <div class="case_title">&nbsp;{{video.type | formatType}}《{{video.videoName}}》</div>
          <div class="case_attr fl">
            <a>上传人：{{video.videoDetail.issuer}}</a>
            <a>上传日期：{{video.videoDetail.uploadTime | formatDate}}</a>
          </div>
          <!-- <div class="score fr">
               <p>
                   <span class="stars_l"></span>
                   <span class="stars_l"></span>
                   <span class="stars_l"></span>
                   <span class="stars_l"></span>
                   <span class="stars_h"></span>
               </p>
               <p><a>123</a>人评分</p>
           </div>-->
          <!--视频显示-->
          <div class="case_video">
            <video width="922" controls="controls" autoplay="autoplay"
                   :src="'../upload/'+video.videoUrl">
            </video>
            <div class="case_video_ope">
              <dl>
                <dd class="case_video_ope_icon2_true" v-if="isCollect" @Click="cancelCollectVideo">
                  <span>已收藏</span></dd>
                <dd class="case_video_ope_icon2" v-else @Click="collectVideo"><span>收藏</span></dd>
                <dd class="case_video_ope_icon5" onclick="downloadVideo()"><span>下载</span>
              </dl>
            </div>
            <!--<div id="xzw_starSys">
                <div id="xzw_starBox">
                    <div class="fl"> 评价视频：</div>
                    <ul class="star fr" id="star">
                        <li><a href="javascript:void(0)" title="1" class="one-star">1</a></li>
                        <li><a href="javascript:void(0)" title="2" class="two-stars">2</a></li>
                        <li><a href="javascript:void(0)" title="3" class="three-stars">3</a></li>
                        <li><a href="javascript:void(0)" title="4" class="four-stars">4</a></li>
                        <li><a href="javascript:void(0)" title="5" class="five-stars">5</a></li>
                    </ul>
                    <div class="current-rating" id="showb"></div>
                </div>
            </div>-->
          </div>
          <!-- 反馈模块 -->
          <!--<div class="feedback">
              <div class="feedback_title">评论</div>
              &lt;!&ndash;评论框&ndash;&gt;
              <div class="per_dynamic_comment" style="display: block; padding: 0 18px;">
                  <div class="per_dynamic_textarea"><textarea name="" cols="" rows=""
                                                              placeholder="我也说一说..."></textarea></div>
                  &lt;!&ndash;图标按钮&ndash;&gt;
                  <div class="per_dynamic_button clearfix">
                      <dl class="per_dynamic_button_icon fl">
                          <dd class="per_dynamic_button_icon1"></dd>
                      </dl>
                      <dl class="per_dynamic_button_send fr">
                          <dd class="per_dynamic_button_send1"><a href="javascript:;">取消</a></dd>
                          <dd class="per_dynamic_button_send2"><a href="javascript:;">发表</a></dd>
                      </dl>
                  </div>
              </div>
              &lt;!&ndash;评论列表&ndash;&gt;
              <div class="per_dynamic_comment_list">
                  <div class="per_dynamic_comment_con">
                      <div class="per_dynamic_comment_con_info clearfix">
                          <div class="friends_img fl"><img src="../img/stu_ly_img2.jpg"></div>
                          <div class="friends_info fl">
                              <div class="friends_name" style="padding-bottom: 10px;"><a href="#"> 张三</a>
                              </div>
                              <div class="friends_con">
                                  <p>这里是评论内容这里是评论内容这里是评论内容这里是评论内容这里是评论内容</p>
                              </div>
                              <div class="friends_time">5月12日 12:30</div>
                          </div>
                          <div class="hf_ope"><span class="hf_zan">10</span><span class="hf_1">10</span></div>
                      </div>
                  </div>
              </div>
          </div>-->
        </div>

        <!-- 侧边栏 -->
        <div class="fr">
          <div class="res_upload"></div>
          <div class="res_info">
            <div class="res_info_title">视频详情</div>
            <p>作者：<a>{{video.videoDetail.issuer}}</a></p>
            <p>贡献于：{{video.videoDetail.uploadTime | formatDate}}</p>
            <p>类别：{{video.type | formatType}}</p>
            <p>关键字：<a style="cursor:pointer">{{video.videoDetail.keyword}}</a></p>
            <p>播放量：<i>{{video.videoDetail.browseCount}}</i>&nbsp;次&nbsp;&nbsp;&nbsp;&nbsp;下载量：<i>{{video.videoDetail.downloadCount}}</i>&nbsp;次
            </p>
            <p>视频介绍：{{video.videoDetail.videoDetail}}</p>

          </div>
          <div class="sideBar">
            <h3 class="relation">相关视频推荐<span class="icon-relation fr"></span></h3>
            <ul class="resoureList">
              <li v-for="item in videoList">
                <a :href="'../showVideoDetail?vid='+item.vid" class="icon-file text_overflow"
                   v-text="item.videoName">视频名称</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- footer部分 -->
<footer class="bg-white navbar-light p-4  text-center">
  <div class="container">
    <h3>合作伙伴</h3>
    <p class="m-1">企业培训 | 合作事宜 | 版权投诉</p>
    <p>冀ICP 备12345678. © 2019-2025 chaoliuchuanda. Powered by liuxin.</p>
  </div>
</footer>
</body>
<script type="text/javascript">
  let uid = "";
  let vid = "";
  let message = null;
  /*点击下载视频*/
  function downloadVideo() {
    window.location.href = "../downloadVideo?uid=" + uid + "&vid=" + vid;
  }

  /*导航条用户信息*/
  new Vue({
    el: "#ulInfo",
    data() {
      return {currentUser: "", keyword: "",}
    },
    methods: {
      searchVideo: function () {
        window.location.href = "search.html?keyword=" + this.keyword;
      },
    },
    mounted() {
      message = this.$message;
      axios
        .post('../getCurrentUser')
        .then(result => {
          this.currentUser = result.data;
          uid = this.currentUser.uid;
        })
        .catch(function (error) {
          message.error(error.response.data);
          if (error.response.status === 401) window.location.href = "../login.html";
        });
    }
  });

  /*视频信息*/
  new Vue({
    el: "#videoInfo",
    data: {
      video: "",
      videoList: "",
      isCollect: "",
      result: "",
      downloadResult: "",
    },
    methods: {
      getVideo: function () {
        const loading = this.$loading({
          lock: true,
          text: 'Loading...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        axios.get("../getVideo")
          .then(result => {
            this.video = result.data;
            vid = this.video.vid;

            axios.get("../getVideoByType?type=" + this.video.type)
              .then(result => {
                loading.close();
                this.videoList = result.data;
              })
              .catch(function (error) {
                loading.close();
                message.error(error.response.data);
                if (error.response.status === 401) {
                  window.location.href = "../login.html";
                }
              })
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) {
              window.location.href = "../login.html";
            }

            if (error.response.data == ("该视频为VIP尊享, 请开通VIP")) {
              setTimeout(()=>{window.location.href = "openVIP.html";},1000)
            }
          })

      },
      /*获取收藏列表*/
      isCollectVideo: function () {
        const loading = this.$loading({
          lock: true,
          text: 'Loading...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        axios
          .get('../isCollectVideo')
          .then(result => {
            loading.close();
            this.isCollect = result.data;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          });
      },
      /*点击收藏*/
      collectVideo: function () {
        const loading = this.$loading({
          lock: true,
          text: 'Loading...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        axios
          .get('../collectVideo')
          .then(r => {
            loading.close();
            message.success("收藏成功");
            this.result = r.data;
            this.isCollectVideo();
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          });
      },
      /*取消收藏*/
      cancelCollectVideo: function () {
        const loading = this.$loading({
          lock: true,
          text: 'Loading...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        axios
          .get('../cancelCollectVideo')
          .then(r => {
            message.success("取消成功");
            loading.close();
            this.result = r.data;
            this.isCollectVideo();
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          });
      },
    },
    mounted() {
      this.getVideo();
      this.isCollectVideo();
    },
    filters: {
      formatDate(time) {
        var date = new Date(time);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var date = date.getDate();
        return year + "-" + month + "-" + date
      },
      formatType(typeId) {
        if (typeId === 1) {
          return "JavaSE";
        } else if (typeId === 2) {
          return "Web";
        } else if (typeId === 3) {
          return "MySQL";
        } else if (typeId === 4) {
          return "JavaWeb";
        }
        return "未知"
      },
    },
  });
</script>
</html>
